<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>inHarmony Homepage | Yoursite.com</title>

	<meta name="keywords" content="keyword phrase 1, keyword phrase 2" />
	<meta name="description" content="inHarmony is a perfect corporate html template." />
	
	<link rel="Shortcut Icon" type="image/ico" href="imgs/favicon.ico" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	
	<!-- CSS ______________________________________-->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/magnificpopup.css" >
	<link rel="stylesheet" href="css/font-awesome.min.css">
	
	<link href="css/master.css" rel="stylesheet">
	<link href="css/colors-classic.css" rel="stylesheet">   <!-- The color scheme -->
	
	<!-- Javascripts ______________________________________-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
		<!-- include Easing -->
		<script src="js/jquery.easing.js"></script> 
		<!-- include Cycle -->
		<script src="js/jquery.cycle.all.js"></script> 
		<!-- include jCarousel -->
		<script src="js/jquery.jcarousel.min.js"></script> 
		<!-- include image popups -->
		<script src="js/jquery.magnific-popup.min.js"></script> 
		<!-- include mobile menu -->
		<script src="js/jquery.mobilemenu.js"></script> 
		<!-- include custom script -->
		<script src="js/scripts.js"></script>

	<!-- Fixing Internet Explorer ______________________________________-->
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<link rel="stylesheet" href="css/ie.css" />
	<![endif]-->

	<!--[if IE 7]>
		<link rel="stylesheet" href="css/ie7.css" />
		<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
	<![endif]-->
</head> 

<body class="home">

<div id="wrapperbox">

	<!-- HEADER ______________________________________-->
	<header role="banner">
		
		<div class="wrapper">
			<!-- Logo ______________________________________-->
			<div id="logo">
				<h1>
					<a href="/" rel="home"><img src="imgs/logo.gif" alt="inHarmony Logo" /></a>
					<a href="/" rel="home">inHarmony<span class="blue">.</span></a> <br />
					<span class="subtitle">Just another HTML template</span>
				</h1>
			</div>
			
			<!-- Address Microdata ______________________________________-->
			<div id="address-block" itemscope itemtype="http://schema.org/Organization"> 
			   <span itemprop="name" class="hidden">inHarmony Organization</span> 
			   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
					
				  <span itemprop="streetAddress">2939 4th Ave W</span>,
				  <span itemprop="addressLocality">Vancouver</span>,
				  <span itemprop="postalCode">BC V6K 1R3</span>
			   </div>
			   <span itemprop="telephone"><i class="icon-mobile-phone"></i> <strong>123-456-9999</strong></span> 
			   <a href="mailto:info@yourcompany.com" itemprop="email"><i class="icon-envelope"></i> info@the-company.com</a>
			</div>	
			
			<!-- Social icons ______________________________________-->
			<div id="social-block">
				<ul>
					<li><a href="#" target="_blank" title="Twitter"><i class="icon-twitter"></i></a></li>
					<li><a href="#" target="_blank" title="Facebook"><i class="icon-facebook"></i></a></li>
					<li><a href="#" target="_blank" title="Linkedin"><i class="icon-linkedin"></i></a></li>
					<li><a href="#" target="_blank" title="Pinterest"><i class="icon-pinterest"></i></a></li>
					<li><a href="#" target="_blank" title="Google Plus"><i class="icon-google-plus"></i></a></li>
					<!-- 	<li><a href="#" target="_blank" title="Youtube"><i class="icon-youtube"></i></a></li>
					<li><a href="#" target="_blank" title="Dribbble"><i class="icon-dribbble"></i></a></li>
					<li><a href="#" target="_blank" title="Flickr"><i class="icon-flickr"></i></a></li>
					<li><a href="#" target="_blank" title="Tumblr"><i class="icon-tumblr"></i></a></li>
					<li><a href="#" target="_blank" title="Skype"><i class="icon-skype"></i></a></li> -->
				</ul>
			</div>
		</div>  <!-- END .wrapper -->
		
		<!-- Main menu ______________________________________-->
		<nav id="mainmenu" role="navigation">
			<ul>
				<li><a href="index.html" class="active">Home</a></li>
				<li><a href="#">Styles</a>
					<ul class="sub-menu" id="change-style">
						<li><a href="#" id="classic">Classic</a></li>
						<li><a href="#" id="eco-earth">Eco Earth</a></li>
						<li><a href="#" id="silver-grey">Silver Grey</a></li>
						<li><a href="#" id="passion-red">Passion Red</a></li>
						<li><a href="#" id="golden">Golden</a></li>
						<li><a href="#" id="deep-blue">Deep Blue</a></li>	
					</ul>
				</li>
				<li><a href="elements.html">Pages</a>
					<ul class="sub-menu">
						<li><a href="about-us.html">About Us</a></li>
						<li><a href="elements.html">Elements</a></li>
						<li><a href="team.html">Team</a></li>
						<li><a href="pricing.html">Pricing</a></li>
						<li><a href="testimonials.html">Testimonials</a></li>
						<li><a href="faqs.html">FAQs</a></li>
						<li><a href="404.html">404</a></li>
					</ul>
				</li>
				<li><a href="#">Media</a>
					<ul class="sub-menu">
						<li><a href="portfolio.html">Portfolio</a>
							<ul class="sub-menu">
								<li><a href="portfolio.html">Portfolio Small</a></li>
								<li><a href="portfolio-medium.html">Portfolio Medium</a></li>
								<li><a href="portfolio-large.html">Portfolio Large</a></li>
							</ul>
						</li>
						<li><a href="portfolio-single.html">Portfolio Single</a></li>
						<li><a href="documentation.html">Documentation</a></li>
					</ul>
				</li>
				<li><a href="#">Layouts</a>
					<ul class="sub-menu">
						<li><a href="about-us.html">Left Sidebar</a></li>
						<li><a href="blog-post.html">Right Sidebar</a></li>
						<li><a href="team.html">Full Width</a></li>
					</ul>
				</li>
				
				<li><a href="blog.html">Blog</a>
					<ul class="sub-menu">
						<li><a href="blog-post.html">Blog Post</a></li>
					</ul>
				</li>
				<li><a href="contact.html">Contact</a></li>
			</ul>		

			<!-- Search box ______________________________________-->
			<div id="sitesearch">
				<i class="icon-search"></i>
			</div>
			<div id="search-results">
				<script>
				  (function() {
					var cx = '017683756184911932766:rvnzs1j9m1g';
					var gcse = document.createElement('script');
					gcse.type = 'text/javascript';
					gcse.async = true;
					gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
						'//www.google.com/cse/cse.js?cx=' + cx;
					var s = document.getElementsByTagName('script')[0];
					s.parentNode.insertBefore(gcse, s);
				  })();
				</script>
				<div id="search-box">
					<div class="gcse-search"></div>
				</div>
			</div>
			
		</nav> <!-- END #mainmenu -->
	</header>
			
	<div class="wrapper">
		<!-- Slider banner ______________________________________-->
		<div id="slider">
			<div id="slides">
				<div class="slide">
					<img class="slide-image" src="imgs/slideimage1.png" alt="" />
					<img class="slide-back" src="imgs/slideback1.jpg" alt="" />
					<div class="slide-text">
						<p>Theme inHarmony keeps you happy because...</p>
						<p class="extrabig superbold">IT'S GOOD TO HAVE GOOD CODING</p>
						<p>and <strong>better documentation</strong></p>
						<p class="inline"><a href="#" class="button">Buy it</a></p>
					</div>
				
				</div>
				<div class="slide">
					<img class="slide-image" src="imgs/slideimage2.png" alt="" />
					<img class="slide-back" src="imgs/slideback2.jpg" alt="" />
			
					<div class="slide-text">
						<p>Perfect for business and others</p>
						<p class="extrabig superbold">IT'S CLEAN, COLORFUL, SIMPLE AND PRETTY</p>
						<p>and it has <strong>color schemes</strong>!</p>
					</div>
				</div>
				<div class="slide">
					<img class="slide-image" src="imgs/slideimage3.png" alt="" />
					<img class="slide-back" src="imgs/slideback3.jpg" alt="" />
					<div class="slide-text">
						<p>Responsivness is your best friend</p>
						<p class="extrabig superbold">LOOKS AWESOME AT ANY WIDTH</p>
						<p>with <strong>media queries</strong></p>
					</div>
				</div>
				<div class="slide">
					<img class="slide-image" src="imgs/slideimage4.png" alt="" />
					<img class="slide-back" src="imgs/slideback4.jpg" alt="" />
					<div class="slide-text">
						<p>Everything is in harmony</p>
						<p class="extrabig superbold">PROFESIONALLY STRUCTURED HTML TEMPLATE</p>
						<p>that helps you code <strong>quicker and easily</strong></p>
					</div>
				</div>
			</div>
			<a href="javascript:void(0)" class="prev1"><i class="icon-chevron-left"></i></a>
			<a href="javascript:void(0)" class="next1"><i class="icon-chevron-right"></i></a>
		</div> <!-- END #slider -->
	
		<!-- Features - 6 icons ______________________________________-->
		<div id="features">
			<hr />
			<div class="feature">
				<span class="circle"><i class="icon-copy"></i></span>
				<h3>16 HTML Pages</h3>
				<p>Fantastically built</p>
			</div>
			<div class="feature">
				<span class="circle"><i class="icon-exchange"></i></span>
				<h3>Responsive</h3>
				<p>For every device</p>
			</div>
			<div class="feature">
				<span class="circle"><i class="icon-html5"></i></span>
				<h3>Clean-coded</h3>
				<p>And well-commented</p>
			</div>
			<div class="feature">
				<span class="circle"><i class="icon-trophy"></i></span>
				<h3>Rich snippets</h3>
				<p>For good SEO</p>
			</div>
			<div class="feature">
				<span class="circle"><i class="icon-hand-up"></i></span>
				<h3>Search form</h3>
				<p>With Google CSE</p>
			</div>
			<div class="feature">
				<span class="circle"><i class="icon-cog"></i></span>
				<h3>Color schemes</h3>
				<p>Predefined &amp; pretty</p>
			</div>
			<div class="clear"></div>
		</div> <!-- END #features -->
	</div> <!-- END .wrapper -->

	<!-- Slogan text ______________________________________-->
	<div id="slogan">
		<div class="wrapper">
			<h2>We are eager to help our customers become great!</h2>
			<p>This is inHarmony! This template was developed to be clean, simple to alter and flexible. Please, do not hesitate to play with its design styles, you can either choose a predefined color scheme or simply create your own. inHarmony template has a thorough documentation file, check it out!</p>
			<p><a href="documentation.html" class="small">Go to documentation</a></p>
			<div class="clear"></div>
		</div> <!-- END .wrapper -->
	</div> <!-- END #slogan -->
	
	<div class="wrapper">
		<!-- Latest Projects ______________________________________-->
		<div id="latest-projects">
			<h2>Latest Projects <span class="small grey"> &nbsp;/&nbsp; <a href="portfolio.html">View all</a></span></h2>
			<div class="carousel4">
				<ul>
					<li>
						<a class="popup" href="imgs/portfolio/vladstudio_looove_480x320.jpg"><img src="imgs/portfolio/vladstudio_looove_480x320.jpg" alt="Two Hearts" /></a>
						<h3>Two Hearts</h3>
						<p>For february wallpaper, here is a little piece of love. </p>
					</li>
					<li>
						<a class="popup" href="imgs/portfolio/vladstudio_mothers_day_tiny_wings_480x320.jpg"><img src="imgs/portfolio/vladstudio_mothers_day_tiny_wings_480x320.jpg" alt="Birdies" /></a>
						<h3>Birdies</h3>
						<p> Just some random images in a post. Lorem ipsum dolorsit amet.</p>
					</li>
					<li>
						<a class="popup" href="imgs/portfolio/vladstudio_newborn_480x320.jpg"><img src="imgs/portfolio/vladstudio_newborn_480x320.jpg" alt="" /></a>
						<h3>Little Baby</h3>
						<p> Another sweet piece of our wide-ranged and amazing portfolio.</p>
					</li>
					<li>
						<a class="popup" href="imgs/portfolio/vladstudio_when_you_are_in_love_480x320.jpg"><img src="imgs/portfolio/vladstudio_when_you_are_in_love_480x320.jpg" alt="" /></a>
						<h3>Two Hearts II.</h3>
						<p>It's so wonderful to be in love... every word and every moment is special.</p>
					</li>
					<li>
						<a class="popup" href="imgs/portfolio/vladstudio_ladybug_and_chameleon_480x320.jpg"><img src="imgs/portfolio/vladstudio_ladybug_and_chameleon_480x320.jpg" alt="" /></a>
						<h3>Best Friends</h3>
						<p> Another sweet piece of our wide-ranged and amazing portfolio.</p>
					</li>
					<li>
						<a class="popup" href="imgs/portfolio/vladstudio_snow_leopard_480x320.jpg"><img src="imgs/portfolio/vladstudio_snow_leopard_480x320.jpg" alt="" /></a>
						<h3>Cute Kitty</h3>
						<p>It's so wonderful to be in love... every word and every moment is special.</p>
					</li>
					<li>
						<a class="popup" href="imgs/portfolio/vladstudio_little_anglerfish_480x320.jpg"><img src="imgs/portfolio/vladstudio_little_anglerfish_480x320.jpg" alt="" /></a>
						<h3>Pihrrranna</h3>
						<p>Just some random images in a post. Lorem ipsum dolorsit amet.</p>
					</li>
					<li>
						<a class="popup" href="imgs/portfolio/vladstudio_little_elephant_big_ukulele_480x320.jpg"><img src="imgs/portfolio/vladstudio_little_elephant_big_ukulele_480x320.jpg" alt="" /></a>
						<h3>Baby Elephant</h3>
						<p>Just some random images in a post. Lorem ipsum dolorsit amet.</p>
					</li>
				</ul>
			</div>
			<a href="javascript:void(0)" class="prev1"><i class="icon-chevron-left"></i></a>
			<a href="javascript:void(0)" class="next1"><i class="icon-chevron-right"></i></a>
		</div> <!-- END #latest-projects -->
	
		<!-- Recent News ______________________________________-->
		<div id="recent-news">
			<h2>Recent News</h2>
			<div class="carousel-vert4">
				<ul>
					<li>
						<article class="recent-blog">
							<section class="date">
								<span class="day">31</span>
								<span class="month">Jul</span>
							</section>
							<figure>
								<a href="blog-post.html"><img src="imgs/portfolio/vladstudio_books_color3_480x320.jpg" alt="" /></a>
							</figure>
							<h3><a href="blog-post.html">Once Upon a Time, There Was a Template...</a></h3>
						</article>
					</li>
					<li>
						<article class="recent-blog">
							<section class="date">
								<span class="day">17</span>
								<span class="month">Jul</span>
							</section>
							<figure>
								<a href="blog-post.html"><img src="imgs/portfolio/vladstudio_cheshire_kitten_480x320.jpg" alt="" /></a>
							</figure>
							<h3><a href="blog-post.html">Mistakes I've Made (And Lessons Learned Along the Way)</a></h3>
						</article>
					</li>
					<li>
						<article class="recent-blog">
							<section class="date">
								<span class="day">15</span>
								<span class="month">Jul</span>
							</section>
							<figure>
								<a href="blog-post.html"><img src="imgs/portfolio/vladstudio_alice_dragon_tree_480x320.jpg" alt="" /></a>
							</figure>
							<h3><a href="blog-post.html">Introduction to Photoshop Scripting</a></h3>
						</article>
					</li>
					<li>
						<article class="recent-blog">
							<section class="date">
								<span class="day">04</span>
								<span class="month">Jul</span>
							</section>
							<figure>
								<a href="blog-post.html"><img src="imgs/portfolio/vladstudio_robots_in_love_480x320.jpg" alt="" /></a>
							</figure>
							<h3><a href="blog-post.html">Great Products Focus on a Motif</a></h3>
						</article>
					</li>
					<li>
						<article class="recent-blog">
							<section class="date">
								<span class="day">31</span>
								<span class="month">Jul</span>
							</section>
							<figure>
								<a href="blog-post.html"><img src="imgs/portfolio/vladstudio_xmas_dragon_480x320.jpg" alt="" /></a>
							</figure>
							<h3><a href="blog-post.html">Once Upon a Time, There Was a Template...</a></h3>
						</article>
					</li>
					<li>
						<article class="recent-blog">
							<section class="date">
								<span class="day">17</span>
								<span class="month">Jul</span>
							</section>
							<figure>
								<a href="blog-post.html"><img src="imgs/portfolio/vladstudio_missing_him_480x320.jpg" alt="" /></a>
							</figure>
							<h3><a href="blog-post.html">Mistakes I've Made (And Lessons Learned Along the Way)</a></h3>
						</article>
					</li>
					<li>
						<article class="recent-blog">
							<section class="date">
								<span class="day">15</span>
								<span class="month">Jul</span>
							</section>
							<figure>
								<a href="blog-post.html"><img src="imgs/portfolio/vladstudio_library_480x320.jpg" alt="" /></a>
							</figure>
							<h3><a href="blog-post.html">Introduction to Photoshop Scripting</a></h3>
						</article>
					</li>
					<li>
						<article class="recent-blog">
							<section class="date">
								<span class="day">04</span>
								<span class="month">Jul</span>
							</section>
							<figure>
								<a href="blog-post.html"><img src="imgs/portfolio/vladstudio_little_quetzal_480x320.jpg" alt="" /></a>
							</figure>
							<h3><a href="blog-post.html">Great Products Focus on a Motif </a></h3>
						</article>
					</li>
				</ul>
			</div>
			<a class="read-more" href="blog.html">Read all posts</a>
			<a href="javascript:void(0)" class="next2"><i class="icon-chevron-down"></i></a>
			<a href="javascript:void(0)" class="prev2"><i class="icon-chevron-up"></i></a>
		</div> <!-- END #recent-news -->
	
		<!-- Testimonials ______________________________________-->
		<div id="testimonials">
			<h2>What Our Clients Say</h2>
			<div id="quotes">
				<div class="quote">
					<blockquote>
						<p>“Men want to be with women who challenge them, who push them, and who take the lead some of the times. It’s that attitude, that sassiness, that confidence, that charisma, that charm that shows she can be a little bold and little daring.”</p>
					</blockquote>
					<footer>
						<img src="imgs/quote-author.jpg" alt="Author" />
						<small class="author">J.R. Simmons, CEO of Company</small>
					</footer>
				</div>
				<div class="quote">
					<blockquote>
						<p>“By letting it go it all gets done. The world is won by those who let it go. But when you try and try. The world is beyond the winning.”</p>
					</blockquote>
					<footer>
						<img src="imgs/quote-author-2.jpg" alt="Author" />
						<small class="author">Lao Tsu</small>
					</footer>
				</div>
				<div class="quote">
					<blockquote>
						<p>“All love relationships have a delicate balance between intimacy and independence.”</p>
					</blockquote>
					<footer>
						<img src="imgs/quote-author-3.jpg" alt="Author" />
						<small class="author">Anonymous</small>
					</footer>
				</div>
				<div class="quote">
					<blockquote>
						<p>“Love him the way he wants you to love him—love her the way she wants you to love her. Not the way you want to love your partner.”</p>
					</blockquote>
					<footer>
						<img src="imgs/quote-author-4.jpg" alt="Author" />
						<small class="author">Anonymous</small>
					</footer>
				</div>
			</div>
			<div id="quotes-nav">
				<a href="javascript:void(0)" class="next2"><i class="icon-chevron-right"></i></a>
				<a href="javascript:void(0)" class="prev2"><i class="icon-chevron-left"></i></a>
			</div>
		</div> <!-- END #testimonials -->
	
		<!-- Our Clients ______________________________________-->
		<div id="clients">
			<h2>Our Clients</h2>
			<div class="carousel7">
				<ul>
					<li><img src="imgs/clientlogo1.png" alt="" /></li>
					<li><img src="imgs/clientlogo2.png" alt="" /></li>
					<li><img src="imgs/clientlogo3.png" alt="" /></li>
					<li><img src="imgs/clientlogo4.png" alt="" /></li>
					<li><img src="imgs/clientlogo5.png" alt="" /></li>
					<li><img src="imgs/clientlogo6.png" alt="" /></li>
					<li><img src="imgs/clientlogo7.png" alt="" /></li>
					<li><img src="imgs/clientlogo1.png" alt="" /></li>
					<li><img src="imgs/clientlogo2.png" alt="" /></li>
				</ul>
			</div>
		</div> <!-- END #clients -->
	</div> <!-- END .wrapper -->
			

	<!-- Footer ______________________________________-->
	<footer role="contentinfo" id="footer">
		<div class="wrapper">
			<div class="footerbox">
				<h3>About Us</h3>
				<p>We create awesome HTML and WP themes and templates for your great online presence. We also provide support if you get any issues on our items. Check it out!</p>
				<br />
				<p><a href="http://themeforest.net/user/Darinka?ref=Darinka" target="_blank" class="button">BUY THIS</a></p>
			</div> <!-- END .footerbox -->
		
			<div class="footerbox">
				<h3>Latest News</h3>
				<ul>
					<li>
						<i class="icon-file-text"></i> 
						<h4><a href="blog-post.html">Single Clean Post</a></h4>
						<p class="small"><strong>Aug 3</strong> / admin </p>
					</li>
					<li>
						<i class="icon-file-text"></i> 
						<h4><a href="blog-post.html">Our Blog Revived!</a></h4>
						<p class="small"><strong>Aug 3</strong> / Darinka </p>
					</li>
					<li>
						<i class="icon-file-text"></i> 
						<h4><a href="blog-post.html">New Site Out Tomorrow</a></h4>
						<p class="small"><strong>Aug 3</strong> / admin </p>
					</li>
				</ul>
			</div> <!-- END .footerbox -->
			
			<div class="footerbox">
				<h3>Events</h3>
				<ul>
					<li>
						<i class="icon-calendar"></i> 
						<h4><a href="event.html">Open Klasses</a></h4>
						<p class="small"><strong>Aug 3</strong> / Street Art 2013 </p>
					</li>
					<li>
						<i class="icon-calendar"></i> 
						<h4><a href="event.html">Summer Party</a></h4>
						<p class="small"><strong>Aug 10</strong> / Best place to party! </p>
					</li>
					<li>
						<i class="icon-calendar"></i> 
						<h4><a href="event.html">Charity Event</a></h4>
						<p class="small"><strong>Aug 12</strong> / Help find the cure!</p>
					</li>
				</ul>
			</div> <!-- END .footerbox -->
			
			<div class="footerbox last">
				<h3>Our newsletter</h3>
				<form method="post" action="#">
					<p>Sign up now to receive weekly news about new products and great discounts!</p>
					<p><label for="email">Your e-mail address</label> <input type="text" id="email" value="" /></p>
					<p><button type="submit">Subscribe</button></p>
				</form>
			</div> <!-- END .footerbox -->
			<div class="clear"></div>

			<hr />
			<p class="left small">Copyright &copy; 2013 Your Company Name. <br />All rights reserved.</p>
			<ul class="footermenu">
				<li><a href="#">Home</a></li>
				<li><a href="#">Styles</a></li>
				<li><a href="#">Pages</a></li>
				<li><a href="#">Media</a></li>
				<li><a href="#">Layouts</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
			</ul> <!-- END .footermenu -->
			<div class="clear"></div>
		</div>  <!-- END .wrapper -->
	</footer>
</div> <!-- END #wrapperbox -->
<br class="clear" /> <!-- This is the end, my friend -->


<!-- Initializing scripts ______________________________________-->
	<script> 			
	jQuery(window).load(function() {
		// init Cycle for slider
		
		$('#slides').after('<div id="circle-pager">').cycle({
			fx:      'fade', 
			speed:    300, 
			timeout:  8000,
			cleartype:  true,
			cleartypeNoBg: false,
			pager: '#circle-pager',
			next:  '#slider .next1', 
			prev:  '#slider .prev1',
			slideResize: true,
			fit: 1,
			width: '100%',
			before:  function(currSlideElement, nextSlideElement) { 
				// hide elements and put them in start position		
				$(this).find('.slide-image').css({
					'opacity': '0',
					'left': '-50px'
				});
				$(this).find('.slide-text').css({
					'opacity': '0',
					'top': '0'
				});
				$(this).find('.slide-text p').css({
					'opacity': '0',
					'left': '15px'
				});
			},
			after:  function(currSlideElement, nextSlideElement) { 			
				// fade in image
				$(this).find('.slide-image').animate({
					'opacity': '1',
					'left': '0'
				}, 500, 'linear');
				// bring the text box from top
				$(this).find('.slide-text').delay(500).animate({
					'opacity': '1',
					'top': '25%'
				}, 500, 'easeOutBack');
				// bring the paragraphs in
				$(this).find('.slide-text p:eq(0)').delay(500).animate({
					'opacity': '1',
					'left': '0'
				}, 500, 'easeOutBack');
				$(this).find('.slide-text p:eq(1)').delay(700).animate({
					'opacity': '1',
					'left': '0'
				}, 500, 'easeOutBack');
				$(this).find('.slide-text p:eq(2)').delay(900).animate({
					'opacity': '1',
					'left': '0'
				}, 500, 'easeOutBack');
				$(this).find('.slide-text p:eq(3)').delay(1100).animate({
					'opacity': '1',
					'left': '0'
				}, 500, 'easeOutBack');

			} 
		});

		// init Cycle for testimonials
		$('#quotes').cycle({
			fx:      'fade', 
			speed:    400, 
			timeout:  0,
			cleartype:  false,
			next:  '#quotes-nav .next2', 
			prev:  '#quotes-nav .prev2',
			slideResize: true,
			fit: 1,
			width: '100%'
		});
		
		// init jCarousel for portfolio projects
		$('.carousel4').jcarousel({
			'visible': 4,
			'wrap': 'both'
		});
		$('#latest-projects .prev1').click(function() {
			$('.carousel4').jcarousel('scroll', '-=1');
		});
		$('#latest-projects .next1').click(function() {
			$('.carousel4').jcarousel('scroll', '+=1');
		});

		// init jCarousel for recent news
		$('.carousel-vert4').jcarousel({
			'vertical': true,
			'visible': 4,
			'wrap': 'both'
		});
		$('#recent-news .prev2').click(function() {
			$('.carousel-vert4').jcarousel('scroll', '-=1');
		});
		$('#recent-news .next2').click(function() {
			$('.carousel-vert4').jcarousel('scroll', '+=1');
		});
		 
		// init jCarousel for client logos
		$('.carousel7').jcarousel({
			'wrap': 'circular'
		}).jcarouselAutoscroll({
			'interval': 2000,
			'autostart': true,
			'target': '+=1'
		});	
	});
	</script>
	
	<!-- Your Google Analytics ______________________________________-->
	<script type="text/javascript">
	
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
		  _gaq.push(['_trackPageview']);
		
		  (function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })(); 
	
	</script>
</body>
</html>
